<template>
    <div class="right-top-card">
        <CategorySelect class="right-top-card-category-select"></CategorySelect>
        <BaseECharts :option="options" height="300px"></BaseECharts>
    </div>
</template>

<script setup lang="ts">
import echarts from '@/components/baseECharts/config'
import type { ECOption } from '@/components/baseECharts/config'

const colorList = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#56E4FF00' },
        { offset: 1, color: '#56E4FF90' },
    ]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#2473ef00' },
        { offset: 1, color: '#2473ef90' },
    ]),
]

const dataType = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

const data = dataType.map((item) => {
    const random = Number((Math.random() * 200).toFixed())
    return { value: random, name: item }
})

const options = reactive<ECOption>({
    graphic: [
        // 自定义左上角标题
        {
            type: 'group',
            children: (() => {
                const img = new URL('../../../images/title-box-2.png', import.meta.url).href
                const width = 143
                const height = 39
                const title = '报修次数统计'
                return [
                    {
                        type: 'text',
                        style: {
                            align: 'center',
                            verticalAlign: 'middle',
                            text: title,
                            width: width,
                            height: height,
                            lineHeight: height,
                            x: width / 2,
                            y: height / 2,
                            fontSize: 18,
                            fontWeight: 'bold',
                            fill: '#fff',
                            backgroundColor: {
                                image: img,
                            },
                            textShadowBlur: 20,
                            textShadowColor: '#fff',
                        },
                    },
                ]
            })(),
        },
    ],
    grid: {
        top: '20%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            data: dataType,
            boundaryGap: true,
            axisLabel: { color: '#2473ef' },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#666',
                },
            },
            splitLine: { show: false },
            axisTick: { show: false },
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: { color: '#fff' },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#666',
                },
            },
            axisLine: { show: false },
            axisTick: { show: false },
        },
    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985',
            },
        },
    },
    series: [
        {
            name: '报修次数',
            type: 'line',
            data: data,
            smooth: true,
            showSymbol: true,
            symbolSize: 10,
            itemStyle: {
                color: '#56E4FF',
            },
            lineStyle: { width: 3 },
            areaStyle: { opacity: 0.8, color: colorList[0] },
        },
    ],
})
</script>

<style lang="scss" scoped>
.right-top-card {
    position: relative;
    height: 300px;

    .right-top-card-category-select {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
    }
}
</style>
